<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看设备</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./vue.min.js"></script>
    <script src='./set.js'></script>
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    *{-webkit-text-size-adjust:auto !important;}
    html {
      font-size: 62.5%;
    }
    
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .main {
      width: 95%;
      margin: 0 auto;
      font-family: PingFangSC-Regular;
    }
    .head {
      height: 130px;
      background: #4b93fd;
      padding: 10px 10% 10px 10%;
      color: white;
      border-radius: 5px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.05px;
      text-align: right;
      margin-top: 10px;
    }
    .headItemName {
      text-align: left;
      float: left;
    }
    .headItemCont {
      text-align: right;
      float: right;
    }
    .headItem {
      width: 100%;
      height: 30px;
      border-bottom: 1px solid #99c7fb;
      line-height: 30px;
    }
    .cpu {
      float: left;
    }
    .memory {
      float: right;
    }
    .cpu .headItemCont {
      margin-left: 20px;
    }
    .memory .headItemName {
      margin-right: 20px;
    }
    .banner {
      margin-top: 10px;
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 20px;
      background: #eceff6;
      border-radius: 4px;
      height: 100%;
    }
    
    .back {
      float: right;
      text-align: right;
      margin-right: 20px;
      margin-top: 20px;
      margin-bottom: 50px;
    }
    .bannerItemTitle {
      height: 21px;
      width: 52px;
      text-align: center;
      line-height: 21px;
      color: white;
      background: #4b93fd;
      float: left;
      margin-bottom: 10px;
      border-radius: 2px;
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.05px;
      text-align: center;
      background: gray;
    
    }
    .bannerItemTitle_1{
        height: 21px;
      width: 52px;
      text-align: center;
      line-height: 21px;
      color: white;
      background: #4b93fd;
      float: left;
      margin-bottom: 10px;
      border-radius: 2px;
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.05px;
      text-align: center;
      background: linear-gradient(to right, #5998ff, blue);
    
    }
    .bannerItemTitle_1_1{
        height: 21px;
      width: 52px;
      text-align: center;
      line-height: 21px;
      color: white;
      background: #4b93fd;
      float: left;
      margin-bottom: 10px;
      border-radius: 2px;
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.05px;
      text-align: center;
      background: linear-gradient(to right, #5998ff, blue);
    }
    .bannerItem {
      clear: both;
      margin-top: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .bannerContItem {
      height: 30px;
      font-size:14px;
      position: relative;
      display: flex;
    }
    .bannerContItemCont {
      margin-left: 6.7%;
      color: black;
      float: left;
      width: 60%;
      text-align: left;
    }
    .bannerContItemName {
      color: #4b93fd;
      float: left;
      text-align: left;
      font-size: 14px;
      color: #3a60f3;
      letter-spacing: 0.25px;
      width: 81px;
      margin-bottom: 11px;
    }
    .bannerItem:last-child {
      border: none;
    }
    .marginTop {
      margin-top: 20px;
    }
    
    .inputSpan {
      float: left;
      line-height: 25px;
    }
    .subBox {
      float: right;
      width: 53px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      font-size: 10px;
      color: #ffffff;
      letter-spacing: 0.21px;
      background: #989898;
      border-radius: 7px;
      position: absolute;
      right: 0.3%;
    }
    .subBox_1 {
      float: right;
      width: 53px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      margin-top: -16px;
      font-size: 10px;
      color: #ffffff;
      letter-spacing: 0.21px;
      background: #3962f2;
      border-radius: 7px;
      position: absolute;
      right: 0.3%;
      top: 15px;
    }
    .bannerFirst:last-child .bannerContItemCont {
      margin-left: 2.7%;
    }
    .bannerFirst:last-child .bannerContItemName {
      width:80px;
    }
    .validateCode {
      width: 65px;
      height: 15px;
      background: #3962f2;
      border-radius: 3px;
      font-size: 9px;
      color: #ffffff;
      letter-spacing: 0.19px;
      float: right;
      margin-top: 3px;
      /* margin-right: 28%; */
      position: absolute;
      left: 29%;
      top: -3px;
      text-align: center;
    }
    
    .yanzheng {
      display: block;
      height: 20px;
      width: 41.7%;
      /* margin-left: 13.7%; */
      background: none;
      border: none;
      vertical-align: middle;
      border-bottom: 1px solid #aeadb2;
      position: absolute;
      left: 11%;
      top: -3px;
    }
    .diya {
      font-size: 12px;
      color: #3a60f3;
      letter-spacing: 0.25px;
      position: absolute;
    }
    .diyainput {
      width: 20%;
      position: absolute;
      left: 22%;
      width: 40%;
    }
    .inputSpan {
      position: absolute;
      left:66%;
    }
    .tagName{
        display: flex;
    }
    
    
    </style>
</head>


<body>
  
    <div id="wrapp">
        <div class="main">
            <div class="head">
                <div class="headItem">
                    <span class="headItemName">设备ID</span>
                    <span class="headItemCont">{{headData.id | hideWord}}</span>
                </div>
                <div class="headItem">
                    <span class="headItemName">MAC地址</span>
                    <span class="headItemCont">{{headData.mac}}</span>
                </div>
                <div class="headItem">
                    <div class="cpu">
                        <span class="headItemName">CPU</span>
                        <span class="headItemCont" v-if="model=='PL7200B'">E5_2670</span>
                        <span class="headItemCont" v-else>E5_2670</span>
                    </div>
                    <div class="memory">
                        <span class="headItemName">内存</span>
                        <span class="headItemCont" v-if="model=='PL7200B'">32G</span>
                        <span class="headItemCont" v-else-if="model=='PL400'">4G</span>
                        <span class="headItemCont" v-else>8G</span>
                    </div>
                </div>
                <div class="headItem">
                    <span class="headItemName">硬盘</span>
                    <span class="headItemCont" v-if="model=='PL7200B'">72T</span>
                    <span class="headItemCont" v-else-if="model=='PL400'">4T</span>
                    <span class="headItemCont" v-else>8T</span>
                </div>
            </div>
            <div class="banner">
                <div class="bannerFirst">
                    <div class="tagName">
                        <div class="bannerItemTitle" v-bind:class="{bannerItemTitle_1:fengfeng_1}" @click="storjShowAction">storj</div>
                        <div class="bannerItemTitle" v-bind:class="{bannerItemTitle_1_1:fengfeng}" @click="plcShowAction"
                            style="margin-left:20px">plc</div>


                    </div>
                    <div class="bannerItem" v-for="(bannerItem,ind) in checkPropertyData" v-show="storjShow">
                        <div class="bannerContItem">
                            <span class="bannerContItemName" @click="show(ind)">节点ID</span>
                            <span class="bannerContItemCont">{{bannerItem.id | hideWord}}</span>
                        </div>
                        <div>

                            <div class="bannerContItem">
                                <span class="bannerContItemName">分配</span>
                                <span class="bannerContItemCont">{{bannerItem.allocs}}</span>
                            </div>
                            <div class="bannerContItem">
                                <span class="bannerContItemName">在线时间</span>
                                <span class="bannerContItemCont">{{bannerItem.online}}</span>
                            </div>
                            <div class="bannerContItem">
                                <span class="bannerContItemName">已分享空间</span>
                                <span class="bannerContItemCont">{{bannerItem.shared}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bannerItem" v-show="plcShow">

                        <div class="bannerContItem">
                            <span class="diya">抵押</span>
                            <input type="text" v-model="inputContent" class="diyainput">
                            <span class="inputSpan">PLC</span>
                            <span class="subBox" @click="sub" v-if="inputContent" style="background: blue">抵押</span>
                            <span class="subBox" v-else>抵押</span>
                        </div>
                        <div class="bannerContItem">
                            <span class="bannerContItemName">抵押资产</span>
                            <span class="bannerContItemCont">{{mortgageData.plcpledge}}</span>
                        </div>
                        <div class="bannerContItem">
                            <span class="bannerContItemName">状态</span>
                            <span class="bannerContItemCont" v-if="this.checkPropertyData">Running</span>
                            <span class="bannerContItemCont" v-else>Stop</span>
                        </div>

                        <div class="bannerContItem">
                            <span class="bannerContItemName">获币数</span>
                            <span class="bannerContItemCont">{{mortgageData.plcsincome | keepThreeNum}}PLC</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="back" @click="backTo">返回&nbsp;&nbsp;&nbsp;></div>
            <div class="tishi" style="font-size:13px;color:red;text-align:left;margin-top: 10px;" v-show="plcShow">温馨提示：抵押的PLC越多，获得的收益越快哦！</div> 

        </div>

    </div>
    <script>
        let app = new Vue({
            el: "#wrapp",
            data: {
                fengfeng_1: true,
                fengfeng: false,
                storjShow: true,
                plcShow: false,
                headData: {

                },
                checkPropertyData: [

                ],
                mortgageData: {

                },
                inputContent: "",
                phoneNum: "",
                codeValue: "",
                sendMsgDisabled: false,
                reGet: false,
                rTime: 10,
                captcha: "",
                isShow: false,
                isShow_1: false,
                session: "",
                id: "",
                itemShow: false,
                boxBoolean: [],
                disk: "",
                cpu: '',
                cpu_1: '',
                model: '',
                wallet: '',
                plcpledge: ''
            },
            filters: {
                //字符串隐藏处理
                hideWord: function (str) {
                    let string = String(str);
                    let len = string.length;
                    let stringBefore = string.slice(0, 11);
                    let stringBeHand = string.slice(len - 10, len + 1);
                    let newString = stringBefore + "..." + stringBeHand;
                    return newString;
                },
                del: function (str) {
                    let string = String(str);
                    let len = string.length;
                    let newString = string.slice(1, len - 1);
                    return newString;
                },
                keepThreeNum: function (value) {
                    if (value) {
                        value = Number(value);
                        return value.toFixed(3);
                    } else {
                        return '---';
                    }
                },
            },
            mounted() {
                this.getDiYa();
            },
            created() {
                this.session = this.parseURL().session;
                this.id = this.parseURL().id;
                this.loadData();
                this.loadData_1();
            },
            watch: {

            },
            methods: {
                storjShowAction() {
                    this.storjShow = true;
                    this.plcShow = false;
                    this.fengfeng = false;
                    this.fengfeng_1 = true;
                },
                plcShowAction() {
                    this.fengfeng = true;
                    this.storjShow = false;
                    this.plcShow = true;
                    this.fengfeng_1 = false;
                },
                //点击显示节点信息   
                show(ind) {
                    console.log(this.boxBoolean);
                    if (this.boxBoolean[ind] == false) {
                        this.boxBoolean[ind] = true
                    } else {
                        this.boxBoolean[ind] = false;
                    }
                },
                backTo() {
                    let url = appUrl + 'login.html?session=' + this.session;
                    window.location.href = url;
                },
                //获取抵押数据
                getDiYa() {
                    let param = {};
                    param["session"] = this.session;
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/subsidy",
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if(res.data.retcode=='00000'){
                                    this.mortgageData = res.data.subsidy;
                                }else if(res.data.retcode=='00006'){
                                    alert('session已过期，重新登录');
                                     window.location.href="http://sky.valuechain.group/yunchao/login.html";
                                }
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                },
                //复制按钮
                copy() {
                    //复制内容
                    var Url2 = document.getElementById("bannerContItemCont");
                    Url2.select();
                    // 选择对象 
                    document.execCommand("Copy");
                    // 执行浏览器复制命令 
                },
                //提交按钮
                sub() {
                    let param = {};
                    this.inputContent = parseFloat(this.inputContent)
                    param["session"] = this.session;
                    param["plc"] = this.inputContent;
                    if (this.inputContent > this.mortgageData.plcsincome) {
                        alert("超过余额数了，亲");
                        this.inputContent = '';
                        return;
                    }
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/pledge ",
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if(res.data.retcode='00000'){
                                    alert("已提交申请,请稍等")
                                let time = setInterval(function () {
                                    app.getDiYa();
                                }, 5000)
                                app.inputContent = '';
                                }else{
                                    alert("系统繁忙，请稍后再试")
                                }
                               
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                },
                // cpu数据处理
                CUPchuli(str) {
                    let string = String(str);
                    let index = string.indexOf("U");
                    let newString = string.slice(index + 2);
                    let index_1 = string.indexOf('0');
                    let newString_1 = slice(0, index_1 + 1);
                    return newString_1;
                },
                //获取数据
                loadData() {
                    let param = {};
                    param["session"] = this.session;
                    param["id"] = this.id;
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/system",
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if (res.data.retcode == 00000) {
                                    app.headData = res.data;
                                    app.headData.disk = JSON.parse(app.headData.disk);
                                    app.disk = app.headData.disk;
                                    app.model = app.headData.model;
                                }
                            } else {
                                // alert("网络连接错误1");
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误2");
                        });
                },
                loadData_1() {
                    let param = {};
                    param["session"] = this.session;
                    param["id"] = this.id;
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/storj/lists",
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if (res.data.retcode == 00000) {
                                    app.checkPropertyData = res.data.lists;
                                    let len = app.checkPropertyData;
                                    for (i = 0; i < len; i++) {
                                        app.boxBoolean[i] = false;
                                    }
                                    app.wallet = app.checkPropertyData[0].wallet
                                }
                            } else {
                                // alert("网络连接错误1");
                            }
                        })


                        .catch(err => {
                            // alert("网络连接错误");
                        });
                },
                parseURL: function (_url) {
                    let queryString = '';
                    let url = _url || location.href;
                    let index = url.lastIndexOf('?');
                    let map = {};
                    /* 如果当前 url 没有 query-string*/
                    if (index > -1) {
                        let queryString = url.slice(index).split('?')[1];
                        queryString.split('&').forEach(function (item) {
                            let t = item.split('=');
                            map[t[0]] = t[1];
                        });
                    }
                    return map;
                },
                //处理数据
                delect(str) {
                    if (str) {
                        let string = String(str);
                        let len = string.length;
                        let newString = string.slice(1, len - 1);
                        newString = JSON.parse(newString);
                        return newString;
                    } else {
                        return '---'
                    }

                },
                //获取验证码
                code() {
                    this.sendMsgDisabled = true;
                    let rTime = this.rTime;
                    // 倒计时
                    let interval = window.setInterval(() => {
                        if (--this.rTime <= 0) {
                            this.rTime = rTime;
                            this.sendMsgDisabled = false;
                            this.reGet = true; // 重新获取按钮
                            window.clearInterval(interval);
                        }
                    }, 1000);
                    console.log(this.captcha)
                    let param = {};
                    axios({
                        method: "post",
                        url: "",
                        data: param
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if (res.data.code == 200) {
                                    alert("验证码已发送");
                                } else {
                                    alert("验证码有误");
                                }
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                }
            }
        })
    </script>
</body>

</html>